<style>
    .validation-feedback {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 3px;
        background-color: #f8f9fa;
        border-left: 3px solid #6c757d;
    }

    .validation-feedback.text-success {
        color: #155724;
        background-color: #d4edda;
        border-left-color: #28a745;
    }

    .validation-feedback.text-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-left-color: #dc3545;
    }

    .validation-feedback.text-info {
        color: #0c5460;
        background-color: #d1ecf1;
        border-left-color: #17a2b8;
    }

    .form-control.is-valid {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
</style>

<form id="add-form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
    {:token()}

    <!-- 必填字段区域 -->
    <div class="form-group">
        <label for="username" class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="username" name="row[username]" value=""
                   data-rule="required;username;remote(/auth/admin/checkUsername, username=#username)"/>
            <span class="help-block">用户名必须唯一，不能与现有管理员重复</span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">所属级别:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_select('group', $groupdata, null, ['id'=>'group','class'=>'form-control selectpicker',
            'data-rule'=>'required'])}
        </div>
    </div>
    <div class="form-group" id="cityarea-form-group">
        <label for="c-cityarea_id" class="control-label col-xs-12 col-sm-2">所属城市:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-cityarea_id" name="row[city_id]" class="form-control"></select>
        </div>
    </div>
    <div class="form-group" id="school-form-group">
        <label for="c-school_id" class="control-label col-xs-12 col-sm-2">学校:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-school_id" name="row[school_id]" class="form-control"></select>
        </div>
    </div>

    <div class="form-group" id="community-form-group" style="display: ">
        <label for="c-ocation_id_sq" class="control-label col-xs-12 col-sm-2">教学点:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-ocation_id_sq" name="row[ocation_id]" class="form-control" data-rule="required"></select>
        </div>
    </div>

    <!-- 隐藏字段：社区ID将通过学校ID自动获取 -->
    <input type="hidden" id="c-community_id" name="row[community_id]" value=""/>

    <div class="form-group">
        <label for="mobile" class="control-label col-xs-12 col-sm-2">{:__('Mobile')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="mobile" name="row[mobile]" value=""
                   data-rule="required;mobile;remote(/auth/admin/checkMobile, mobile)"/>
            <span class="help-block">手机号必须唯一，不能与现有管理员重复</span>
        </div>
    </div>

    <div class="form-group">
        <label for="password" class="control-label col-xs-12 col-sm-2">{:__('Password')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="password" class="form-control" id="password" name="row[password]" autocomplete="new-password"
                   value="" data-rule="required;password"/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[status]', ['normal'=>__('Normal'), 'hidden'=>__('Hidden')], 'normal')}
        </div>
    </div>

    <!-- 非必填字段区域 -->
    <div class="form-group">
        <label for="email" class="control-label col-xs-12 col-sm-2">{:__('Email')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="email" class="form-control" id="email" name="row[email]" value="" data-rule="email"/>
        </div>
    </div>

    <div class="form-group">
        <label for="nickname" class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="nickname" name="row[nickname]" autocomplete="off" value=""/>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed">{:__('Submit')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>